<template>
    <page-meta :page-style="$theme.pageStyle">
        <!-- #ifndef H5 -->
        <navigation-bar :front-color="$theme.navColor" :background-color="$theme.navBgColor" />
        <!-- #endif -->
    </page-meta>
    <view :style="$theme.variable">
        <navbar title="订单详情" :background="{ background: `rgba(256,256,256, 1)` }" :titleColor="`rgba(0,0,0,1)`"
            :immersive="false"></navbar>

        <view class="order_detail">
            <!-- Header -->
            <view class="p-[30rpx] pb-0 text-white">
                <view class="text-xl">{{ order.orderStatusMsg }}</view>
                <view class="mt-[10rpx]">
                    <!-- 待付款 -->
                    <template v-if="timeStamp && order.orderStatus === 1">
                        <view class="flex" v-if="timeStamp > 0">
                            <text class="mr-[10rpx]">支付剩余</text>
                            <u-count-down :timestamp="timeStamp" format="mm分ss秒" @end="timeStamp = 0" color="#2073F4"
                                class="text-base font-normal text-white" />
                            <text class="ml-[10rpx]">后关闭</text>
                        </view>
                    </template>
                    <!-- 待发货 -->
                    <text v-if="order.orderStatus === 2"> 您的商品正在打包中，请耐心等待… </text>
                    <!-- 待收货 -->
                    <text v-if="order.orderStatus === 3"> 您的商品已经在路上了，请耐心等待… </text>

                    <!-- 已完成 -->
                    <text v-if="order.orderStatus === 4"> 商品已签收，感谢再次购买！ </text>
                </view>
            </view>

            <address-card>
                <view class="text-lg text-[#222] mb-[14rpx]">
                    <text class="font-medium">
                        {{ order?.addressContact }}
                    </text>
                    <text class="ml-[10rpx]">
                        {{ order?.addressMobile }}
                    </text>
                </view>
                <view class="text-base text-content">
                    {{ order?.addressContent }}
                </view>
                <template #right></template>
            </address-card>

            <!-- Main -->
            <view class="rounded-[14rpx] pb-[20rpx] mt-[20rpx] mx-[20rpx] overflow-hidden bg-white">
                <view v-for="item in order.orderGoodsList" :key="item.id"
                    @click.stop="goPage(`/pages/goods_detail/goods_detail?id=${item.goodsId}`)">
                    <goods-card shape="rectangle" class="flex-1" :image="item.goodsImage"
                        :imageStyle="{ width: '180rpx', height: '180rpx' }" :name="item.goodsName" :containStyle="{
                            height: '220rpx',
                            'border-radius': '0'
                        }">
                        <view class="flex justify-between mt-[8rpx]">
                            <price :content="item.goodsPrice" main-size="32rpx" minor-size="28rpx" fontWeight="500" />
                            <text class="text-main">x {{ item.goodsNum }}</text>
                        </view>
                    </goods-card>
                    <view class="flex justify-end mr-4">
                        <button v-if="!item.afterSalesMsg && item.afterSalesBtn" class="apply-btn plain-gray" @click.stop="
                            goPage(`/packageA/pages/apply_refund/apply_refund?id=${item.id}`)
                            ">
                            申请售后
                        </button>
                        <template v-else>
                            <view class="text-[#fd8d1c]">{{ item.afterSalesMsg }}</view>
                        </template>
                    </view>
                </view>
            </view>

            <!-- 商品总结 -->
            <view class="text-base card">
                <view class="flex justify-between">
                    <view class="text-content">商品金额</view>
                    <view class="text-[#101010]">¥{{ order.goodsMoney }}</view>
                </view>
                <view class="flex justify-between">
                    <view class="text-content">运费金额</view>
                    <view class="text-[#101010]">¥{{ order.expressMoney }}</view>
                </view>
                <view class="flex justify-between" v-if="order.couponMoney">
                    <view class="text-content">优惠券</view>
                    <view class="text-primary">-¥{{ order.couponMoney }}</view>
                </view>
                <view class="text-right">
                    <text>实付金额：</text>
                    <price :content="order?.needPayMoney" main-size="34rpx" minor-size="26rpx" fontWeight="500" />
                </view>
            </view>

            <!-- 订单信息 -->
            <view class="card text-md">
                <view class="flex col-start" v-if="order?.userRemark">
                    <view class="text-content">订单备注</view>
                    <view
                        style="word-break: break-all; white-space: pre-wrap;"
                        class="ml-[40rpx] flex-1 text-[#101010] whitespace-pre"
                    >
                        {{ order?.userRemark }}
                    </view>
                </view>
                <view class="flex items-center">
                    <view class="text-content">订单编号</view>
                    <view class="ml-[40rpx] flex-1 text-[#101010]"> {{ order.orderSn }}</view>
                    <button class="text-xs copy-btn text-content" @click="copy(order.orderSn)">
                        复制
                    </button>
                </view>
                <view class="flex">
                    <view class="text-content">订单类型</view>
                    <view class="ml-[40rpx] flex-1 text-[#101010]">
                        {{ orderTypeMsg(order.orderType) }}
                    </view>
                </view>
                <view class="flex">
                    <view class="text-content">配送方式</view>
                    <view class="ml-[40rpx] flex-1 text-[#101010]">
                        {{ order?.deliveryType ? '快递配送' : '-' }}
                    </view>
                </view>
                <view class="flex">
                    <view class="text-content">支付方式</view>
                    <view class="ml-[40rpx] flex-1 text-[#101010]">
                        {{ getPayWayDesc(order.payWay) || '-' }}
                    </view>
                </view>
                <view class="flex">
                    <view class="text-content">下单时间</view>
                    <view class="ml-[40rpx] flex-1 text-[#101010]">
                        {{ order.createTime }}
                    </view>
                </view>
                <view class="flex">
                    <view class="text-content">付款时间</view>
                    <view class="ml-[40rpx] flex-1 text-[#101010]">
                        {{ order.payTime }}
                    </view>
                </view>
                <view class="flex">
                    <view class="text-content">发货时间</view>
                    <view class="ml-[40rpx] flex-1 text-[#101010]">
                        {{ order.expressTime }}
                    </view>
                </view>
                <view class="flex" v-if="order.confirmTime">
                    <view class="text-content">成交时间</view>
                    <view class="ml-[40rpx] flex-1 text-[#101010]">
                        {{ order.confirmTime }}
                    </view>
                </view>
            </view>
        </view>

        <!-- Footer -->
        <view class="flex justify-end footer" v-if="order.confirmBtn ||
            order.cancelBtn ||
            order.payBtn ||
            order.deleteBtn ||
            order.logisticsBtn
            ">
            <view class="footer--wrap">
                <order-footer :orderId="order?.id" :confirm="order.confirmBtn" :cancel="order.cancelBtn"
                    :evaluate="order.commentBtn" :payWay="order.payWay" :orderSn="order.orderSn" :pay="order.payBtn" :del="order.deleteBtn" :logistics="order.logisticsBtn"
                    @refresh="initOrderDetail" />
            </view>
        </view>
    </view>

    <!-- Component -->
    <page-status ref="pageRef"></page-status>

    <!-- Component 支付 -->
    <payment v-if="payState.showPay || payState.showCheck" v-model:show="payState.showPay"
        v-model:show-check="payState.showCheck" :order-id="payState.orderId" :from="payState.from"
        :redirect="payState.redirect" @success="handlePayResult" />
</template>

<script lang="ts" setup>
import { useCopy } from '@/hooks/useCopy'
import { onLoad, onUnload } from '@dcloudio/uni-app'
import { orderDetail } from '@/api/order'
import GoodsAbnormalImage from '@/static/images/empty/goods.png'
import OrderFooter from '../../component/order-footer/order-footer.vue'
import { ref, unref, shallowRef, nextTick, reactive, watchEffect, computed } from 'vue'
import { GoodsTypeEnum } from '@/enums/goodsEnums'
import { useRouter } from 'uniapp-router-next'
const router = useRouter()

const { copy } = useCopy()
const pageRef = shallowRef()

const payState = reactive({
    orderId: '',
    from: '',
    showPay: false,
    showCheck: false,
    redirect: '/packageA/pages/order_detail/order_detail'
})

const order = reactive<any>({
    id: '',
    orderSn: '',
    payWay: 0,
    cancelTime: 0,
    orderType: 1,
    orderStatusMsg: '',
    addressContact: '',
    addressContent: '',
    addressMobile: '',
    orderGoodsList: [],
    order_amount: '',
    needPayMoney: '',
    goodsMoney: '',
    createTime: '',
    payBtn: 0,
    cancelBtn: 0,
    confirmBtn: 0,
    deleteBtn: 0,
    logisticsBtn: 0,
    refundBtn: 0
})

const timeStamp = ref<number | null>(0)

const orderTypeMsg = computed(() => {
    return (orderType: number) => {
        switch (orderType) {
            case GoodsTypeEnum.ORDINARY:
                return '普通订单'
            case GoodsTypeEnum.SECKILL:
                return '秒杀订单'
            case GoodsTypeEnum.TEAM:
                return '拼团订单'
        }
    }
})

const getPayWayDesc = computed(() => {
    return (type: number) => {
        switch (type) {
            case 0:
                return '未知支付'
            case 1:
                return '余额支付'
            case 2:
                return '微信支付'
            case 3:
                return '支付宝支付'
        }
    }
})

// 初始化订单详情
const initOrderDetail = async (): Promise<void> => {
    try {
        const data = await orderDetail({ id: order.id })
        Reflect.ownKeys(data).map((item: any) => {
            order[item] = data[item]
        })
        timeStamp.value = Number(order.cancelTime) * 1000
        unref(pageRef)?.close()
    } catch (error) {
        unref(pageRef)?.show({
            text: error,
            src: GoodsAbnormalImage
        })
        console.log('获取订单详情接口', error)
    }
}

// 页面跳转
const goPage = (url: string) => {
    router.navigateTo(url)
}

uni.$on('payment', (param: any) => {
    payState.orderId = param.order_id
    payState.from = param.from
    payState.showPay = true
    payState.redirect =
        payState.redirect +
        `?id=${order.id}&order_id=${param.order_id}&from=${param.from}&checkPay=true`
})

const handlePayResult = async () => {
    payState.showPay = false
    payState.showCheck = false
    await initOrderDetail()
    // uni.redirectTo({
    //     url: `/packageA/pages/order_detail/order_detail?id=${order.id}`
    // })
}

onLoad(async (options: any) => {
    await nextTick()

    try {
        if (!options.id) {
            throw new Error('参数有误')
        }
        order.id = Number(options.id)
        // 初始化订单信息
        await initOrderDetail()

        // h5支付用于弹起手动确认支付弹窗
        if (options?.checkPay) {
            payState.orderId = options.order_id
            payState.from = options.from
            payState.showCheck = true
            // return
        }
    } catch (error) {
        unref(pageRef).show({
            text: error,
            src: GoodsAbnormalImage
        })
        console.log('订单结算', error)
    }
})

onUnload(() => {
    uni.$off(['payment'])
    payState.showPay = false
})
</script>

<style lang="scss">
.order_detail {
    height: 100%;
    // padding: 30rpx 24rpx;
    padding-bottom: 200rpx;
    background: linear-gradient(to bottom, $u-type-primary 200rpx, transparent 0);

    .card {
        padding: 20rpx;
        border-radius: 14rpx;
        line-height: 60rpx;
        margin: 20rpx 20rpx 0 20rpx;
        background-color: #ffffff;
    }

    .apply-btn {
        font-size: 24rpx;
        height: 52rpx;
        padding: 0 20rpx;
        line-height: 52rpx;
        border-radius: 60px;
    }

    .copy-btn {
        width: 100rpx;
        height: 40rpx;
        padding: 0rpx 14rpx;
        border-radius: 60px;
        line-height: 40rpx;
        border: 1px solid #d7d7d7;
    }
}

.footer {
    left: 0;
    bottom: 0;
    width: 100%;
    position: fixed;
    padding: 0 20rpx;
    background-color: #ffffff;
    box-shadow: 2rpx 2rpx 22rpx rgba($color: #000000, $alpha: 0.2);

    &--wrap {
        padding-bottom: env(safe-area-inset-bottom);
    }
}
</style>
